<template>
	<view class="moreAbill">
		<view class="main">
			<view class="box" v-for="item in dataForm" :key="item._id">
				<view class="left">
					<view class="type">
						<image v-if="item.type=='吃喝'" src="../../../static/bookeepingIcon/chihewanle.png" mode="">
						</image>
						<image v-if="item.type=='交通'" src="../../../static/bookeepingIcon/bus-alt.png" mode=""></image>
						<image v-if="item.type=='娱乐'" src="../../../static/bookeepingIcon/yuleAPP.png" mode=""></image>
						<image v-if="item.type=='酒店'" src="../../../static/bookeepingIcon/hotel.png" mode=""></image>
						<image v-if="item.type=='水电'" src="../../../static/bookeepingIcon/shuidianjiaofei.png" mode="">
						</image>
						<image v-if="item.type=='房租'" src="../../../static/bookeepingIcon/fangzu.png" mode=""></image>
						<image v-if="item.type=='买菜'" src="../../../static/bookeepingIcon/huluobu.png" mode=""></image>
						<image v-if="item.type=='购物'" src="../../../static/bookeepingIcon/shopping2.png" mode="">
						</image>
						<image v-if="item.type=='门票'" src="../../../static/bookeepingIcon/menpiao-copy.png" mode="">
						</image>
					</view>
					<view class="time">
						<view class="text">
							{{item.type}}
						</view>
						<view class="times">
							{{item.time}}
						</view>
					</view>
				</view>
				<view class="right">
					<view class="price">
						{{item.money}}
					</view>
					<view class="paypeople">
						{{item.founder}}付款
					</view>
				</view>
			</view>
		</view>
		<view class="" style="height: 120rpx;">

		</view>
		<view @click="exportExcel" class="submit">导出表格</view>
	</view>
</template>

<script>
	import XLSX from '../../../static/js/excel.js'
	export default {
		data() {
			return {
				dataForm: {},
				total: 0,
				founderId: ""
			}
		},
		onLoad(e) {
			this.founderId = e.founderId
			this.getmoreBill()
		},
		methods: {
			sortId(a, b) {
				return a["founder"].localeCompare(b["founder"]);
			},
			classifyArrayGroupBySameFieldAlpha(arr, filed) {
				let temObj = {}
				for (let i = 0; i < arr.length; i++) {
					let item = arr[i]
					if (!temObj[item[filed]]) {
						temObj[item[filed]] = [item]
					} else {
						temObj[item[filed]].push(item)
					}
				}
				let resArr = []
				Object.keys(temObj).forEach(key => {
					resArr.push({
						key: key,
						data: temObj[key],
					})
				})
				return resArr
			},
			exportExcel() {
				// accID: "642d7744f5cf3a3e09f10fea"
				// founder: "夜食"
				// founderId: "64253800f43e603fbe1c64d1"
				// img: []
				// money: "20"
				// remark: "猪肉"
				// time: "2023-04-05"
				// type: "买菜"
				// _id: "6435561ef5cf3a3e0942bbcc"
				const fileName = uni.getStorageSync('accId').name
				const header = ['time', 'type', 'remark', "founder", 'money', 'total']
				const headerName = {
					time: '付款日期',
					type: '类型',
					remark: '备注',
					founder: "付款人",
					money: '付款金额',
					total: "总计"
				}

				const ExcelData = JSON.parse(JSON.stringify(this.dataForm))
				ExcelData.sort(this.sortId);
				let a = this.classifyArrayGroupBySameFieldAlpha(ExcelData, 'founder')
				let num = 0
				a.forEach((item, index) => {
					item.totalMoney = 0
					num += item.data.length
					item.index = num - 1
					item.data.forEach((items, indexs) => {
						item.totalMoney += Number(items.money)
					})
					item.totalMoney = item.totalMoney.toFixed(2)
					ExcelData[item.index].total = item.totalMoney
				})
				ExcelData.forEach(item => {
					if (item.accID) {
						// 删除id属性
						delete item.accID;
					}
					if (item.founderId) {
						// 删除founderId属性
						delete item.founderId;
					}
					if (item.img) {
						// 删除img属性
						delete item.img;
					}
					if (item._id) {
						// 删除_id属性
						delete item._id;
					}
					if (item.createdTime) {
						// 删除createdTime属性
						delete item.createdTime;
					}
				})
				XLSX.excel_exprot(ExcelData, header, headerName, fileName)
			},

			getmoreBill() {
				let data = {
					accID: uni.getStorageSync('accId')._id,
					founderId: this.founderId,
				}
				this.$cloudApi.call({
					name: 'getMainBill',
					data,
					success: res => {
						console.log(res);
						this.dataForm=res.data
					}
				});
			}
		}
	}
</script>

<style scoped lang="less">
	.moreAbill {
		font-size: 25rpx;
		margin-bottom: 20rpx;

		.submit {
			background: #007AFF;
			color: #fff;
			text-align: center;
			border-radius: 40rpx;
			padding: 20rpx;
			width: 94%;
			box-sizing: border-box;
			// margin-top: 140rpx;
			position: fixed;
			bottom: 50rpx;
			left: 22rpx;
		}

		image {
			width: 80rpx;
			height: 80rpx;
		}

		.main {
			.box {
				background-color: #fff;
				padding: 20rpx 40rpx;
				display: flex;
				border-bottom: 1px solid #f1f1f1;
				align-items: center;
				justify-content: space-between;

				.left {
					display: flex;
					align-items: center;

					.time {
						text-align: center;
						margin-left: 10rpx;

						.text {
							margin-bottom: 10rpx;
						}
					}
				}

				.right {
					display: flex;
					align-items: center;
					flex-direction: column;
					justify-content: space-between;

					.price {
						font-weight: bold;
						margin-bottom: 10rpx;
					}
				}
			}
		}
	}
</style>
